HTML Form Elements

Here in this article, we have covered the most common and widely used form nested elements. The <form> element is generally used to provide a form like structure, and its elements describe the various fields and buttons for that structure.

HTML <input> Element

<input> is the most common element used in a form. It creates an input block where the user can enter or select data. <input> type element decides which type of input should be represented on the form block. By default the type attribute value is text , but the developer can change the type value and provide the appropriate input block.

Example

<form>
  Name:
  <input type="text" name="name"><br>
  
  DOB:
  <input type="date" name="DOB"><br>
  
  Email:
  <input type="email" name="email"><br>
  
  File:
  <input type="file" name="doc"><br>
  
  Password:
  <input type="password" name="pass"><br>
  
 <input type="submit" value="Signup">
</form>

Output

Name:

DOB:

Email:

File:

Password:

<note> It is very important to mention the name attribute in the input element because, at the backend, programming language handles the form data using its name.

Type attribute values

• button
• checkbox
• color
• date
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

HTML <select> Element

The <select> element is used to create a drop-down list. It also contains <option> element which represents various options for the drop-down list.

Example

<form>
    
    Select your favourite colour
    <select id="colour" name="colour">
       <option value="red">Red</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
       <option value="black">Black</option>
    </select>

</form>

Output

Select your favourite colourRedBlueGreenBlack

Multiple Attribute

By default, the <select> element allows us to select only one option but using the multiple attribute we can select more than one option.

Example

<form>
    
    Select your favourite colours<br>
    <select id="colour" name="colour" multiple>
       <option value="red">Red</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
       <option value="black">Black</option>
    </select>

</form>

Output

Select your favourite coloursRedBlueGreenBlack

HTML <textarea> Element

<texarea> element is an extension of <input type="text"> element. <textarea> is generally used to represent multi-line input fields.

Example

<form>
   Comment: <br>
     <textarea name="comment" rows="10" cols="90"> 
      Please Comment.....
     </textarea> <br>
     <input type="submit" value="Post">
</form>

Output

Comment: Please Comment.....  

The rows and cols attributes specify the height and width of text area input.

<button> Element

<button> element creates a clickable button and it can be used as a replacement for <input type="submit"> element.

Example

<form>
  Name:<input type="text" name="name">
  <button type="submit"> Click Here</button>
</form>

Name: Click Here

HTML <fieldset> and <legend> Elements

• The <fieldset> element is used to represent a group of relatedble data.
• <legend> element provide a caption to the feildset data.

Example

<form action="/login.php">
   <fieldset>
       <legend>Login:</legend>
       <label for="Username">Username:</label>
       <input type="text" id="Username" name="Username">
       <label for="pass">Password:</label>
       <input type="Password" id="pass" name="pass">
       <input type="submit" value="Login">
    </fieldset>
</form>

Output

Login:
Username: 
Password:

HTML <datalist> Element

<datalist> element is used to specify some pre-defied options for the input block. The list attribute of input must be equal to the id attribute of <datalist>. <datalist> element is similar to the <select> element, but instead of direct selecting the option the user can write the input for the selection. Like the <select> element, in <datalist> we mention some predefined options for the input block.

Example

<form action="/data.php">
Colour:
 <input list="colour">
 <datalist id="colour">
   <option value="RED">
   <option value="Green">
   <option value="Blue">
   <option value="Black">
 </datalist>
 <button type="submit"> Post </button>
</form>

Output

Colour:
 Post

Summary

• The <input> element define an input block where the user can enter data.
• The type attribute of input specifies what type of data must be entered.
• Every form must contain a submit button to process the data.
• <label> element is used to provide a caption to input blocks.
• <feildset> is used to group similar data.
• <option> element can be used with <select> and <datalist> elements.
• <datalist> is used to predefined some options for input block.